import React, { memo } from 'react'

import { hotRadios } from '@/common/local-data'

import { getSizeImage } from "@/utils/format-utils"

import WYThemeHeaderSmall from '@/components/theme-header-small'

import { HotAnchorWrapper } from './style'

export default memo(function HotAnchor() {
  // console.log(hotRadios)

  return (
    <HotAnchorWrapper>
      <WYThemeHeaderSmall title="热门主播" more=""/>
      <div className="anchor-wrapper">
        {
          hotRadios.map(item => {
            return (
              <a href={item.url} className="item" key={item.name}>
                <img src={getSizeImage(item.picUrl, 62)} alt="404"></img>
                <div className="info">
                  <div className="info-name">{item.name}</div>
                  <div className="info-desc text-nowrap">{item.position}</div>
                </div>
              </a>
            )
          })
        }
      </div>
    </HotAnchorWrapper>
  )
})